<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <el-dialog
      :visible.sync="importDialogShowed"
      title="批量导入刷单数据"
      width="700px"
      :close-on-click-modal="false"
      center
      top="30vh">
      <el-alert type="warning" :closable="false" show-icon style="line-height: 1.6">
        单次最多可导入的数据数量最多5000条。若数量较多，可拆分文件后上传
      </el-alert>
      <div class="pt30">
        <el-form>
          <el-form-item required size="mini" label="刷单日期">
            <el-date-picker v-model="formData.clickFarmDate" placeholder="刷单日期" value-format="yyyy-MM-dd"/>
          </el-form-item>
        </el-form>

      </div>
      <div slot="footer" class="flex">
        <div class="flex-con" style="text-align: left;font-size: 14px">
          <a href="/template/刷单数据导入模板.xlsx" target="_blank">
            下载导入模板
          </a>
        </div>
        <file-uploader
          title="上传导入文件"
          icon=""
          size="mini"
          :post-data="formData"
          type="primary"
          action="/api/pdt/product-click-farm/import"
          @success="handleImportSuccess"/>
        <div class="flex-con"></div>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import {productClickFarmApi} from '@/feature/pdt/infra/api/productClickFarmApi'
import CURDTable from '@/framework/components/table/CURDTable'
import FileUploader from "@/framework/components/FileUploader";
import DateUtil from "@/framework/infra/util/DateUtil";
import {storeApi} from "@/feature/mct/infra/api/storeApi";

export default {
  components: {CURDTable, FileUploader},
  data() {
    return {
      importDialogShowed: false,
      formData: {
        clickFarmDate: DateUtil.currentDate()
      },
      option: {
        requestApi: productClickFarmApi,
        showSelection: false,
        opFixed: false,
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            searchable: true,
            width: 120,
            type: ColumnType.SELECT,
            required: true,
            options: storeApi.options()
          },
          {
            label: '刷单日期',
            required: true,
            prop: 'clickFarmDate',
            width: 100,
            type: ColumnType.DATE
          },
          {
            label: '商品id',
            prop: 'productId',
            searchable: true,
            width: 120,
            required: true,
            type: ColumnType.TEXT
          },
          // {
          //   label: '是否已刷单',
          //   prop: 'clickFarmFlag',
          //   type: ColumnType.RADIO,
          //   options: YesNoEnum
          // },
          {
            label: '刷单数量',
            required: true,
            width: 80,
            prop: 'clickFarmNum',
            type: ColumnType.NUMBER
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  methods: {
    handleImportSuccess() {
      this.importDialogShowed = false
      this.$refs.table.reloadTable()
    },
    handleImport() {
      this.importDialogShowed = true
    }
  }
}
</script>

